<template>
  <erp-form-item
    v-if="computedItem"
    :xs-col="xsCol"
    :sm-col="smCol"
    :md-col="mdCol"
    :lg-col="lgCol"
    :xl-col="xlCol"
    :form="form"
    :item="computedItem"
    :value="value"
    @update-field="handleUpdateField"
    @value-change="handleValueChange"
  />
</template>

<script>
import Vue from 'vue';
import {Option, Select} from "element-ui";
import ErpFormItem from '@/components/erp/ErpListForm/ErpFormItem';

Vue.use(Select);
Vue.use(Option);

/**
 * 关联json组件，当前组件配置数据关联到表单中的某个值
 * @author maolin
 */
export default {
  name: "ErpFormRelateJson",
  components: {
    ErpFormItem
  },
  props: {
    /**
     * 字段名
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 当前表单项配置
     * @public
     */
    item: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default() {
        return {};
      }
    },
    /**
     * 值
     * @public
     */
    value: {
      type: [Number, String, Array, Object],
      default: null,
    },
    /**
     * 响应式表单项宽度，参考element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
     * @public
     */
    xsCol: {
      type: Object,
      default () {
        return {span: 24};
      }
    },
    /**
     * 响应式表单项宽度，参考element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
     * @public
     */
    smCol: {
      type: Object,

      default () {
        return {span: 12};
      }
    },
    /**
     * 响应式表单项宽度，参考element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
     * @public
     */
    mdCol: {
      type: Object,

      default () {
        return {span: 12};
      }
    },
    /**
     * 响应式表单项宽度，参考element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
     * @public
     */
    lgCol: {
      type: Object,

      default () {
        return {span: 12};
      }
    },
    /**
     * 响应式表单项宽度，参考element-ui的[el-col](https://element.eleme.cn/#/zh-CN/component/layout#col-attributes)
     * @public
     */
    xlCol: {
      type: Object,

      default () {
        return {span: 12};
      }
    },
  },
  computed: {
    relateField () {
      if (this.item && this.item.extra && this.item.extra.relateField) {
        return this.item.extra.relateField;
      }
      return null;
    },
    computedItem () {
      if (this.form && this.relateField) {
        let jsonString = this.form[this.relateField];
        try{
          let json = JSON.parse(jsonString);
          if (this.item.field) {
            json.field = this.item.field;
          }
          if (this.item.options) {
            json.options = this.item.options;
          }
          return json;
        }catch (e) {
          console.log(e);
        }
      }
      return null;
    }
  },
  mounted() {
  },
  methods: {
    /**
     * 更新值
     * @public
     * @param value 更新的表单中的值
     */
    handleValueChange (value) {
      this.$emit('value-change', value.value);
    },
    /**
     * 更新表单其他值
     * @public
     * @param {object} obj 其他值表单对象{表单字段1:表单值1,表单字段2:表单值2}
     */
    handleUpdateField (obj) {
      this.$emit('update-field', obj);
    },
  }
};
</script>

<style scoped>

</style>
